<template>
  <div class="poappage">
    <el-dialog v-model="state.drawerPage" title="论文" fullscreen :before-close="handleClose">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
<!--      <el-form-item>-->
<!--        <el-input v-model="state.dataForm.title" placeholder="题目" clearable></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-input v-model="state.dataForm.keyword" placeholder="关键词" clearable></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-input v-model="state.dataForm.author" placeholder="论文作者" clearable></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-input v-model="state.dataForm.publishStatus" placeholder="是否出版(0：已出版1：未出版)" clearable></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-date-picker v-model="state.datetimerange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"></el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('poap:poappage:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('poap:poappage:delete')" type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="dataListSelectionChange" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="title" label="题目" header-align="center" align="center"></el-table-column>
      <el-table-column prop="abstracts" label="摘要" header-align="center" align="center"></el-table-column>
<!--      <el-table-column prop="keyword" label="关键词" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="author" label="论文作者" header-align="center" align="center"></el-table-column>
      <el-table-column prop="url" label="论文正文地址" header-align="center" align="center"></el-table-column>
      <el-table-column prop="publishText" label="是否出版" header-align="center" align="center"></el-table-column>
      <el-table-column prop="publicationDate" label="论文出版时间" header-align="center" align="center"></el-table-column>
<!--      <el-table-column prop="doi" label="DOI" header-align="center" align="center"></el-table-column>-->
<!--      <el-table-column prop="journal" label="期刊" header-align="center" align="center"></el-table-column>-->
<!--      <el-table-column prop="pageNumber" label="页数" header-align="center" align="center"></el-table-column>-->
<!--      <el-table-column prop="period" label="期" header-align="center" align="center"></el-table-column>-->
<!--      <el-table-column prop="volume" label="卷" header-align="center" align="center"></el-table-column>-->
<!--      <el-table-column prop="address" label="通讯地址" header-align="center" align="center"></el-table-column>-->
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
<!--          <el-button type="primary" link @click="addPage(scope.row.id)">添加至项目</el-button>-->
          <el-button v-if="state.hasPermission('poap:poappage:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('poap:poappage:delete')" type="primary" link @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
      <template v-slot:footer>
        <el-button type="info" color="#666dfd" @click="postId()" size="large" class="closeBtn">提交</el-button>
        <el-button type="info" color="#666dfd" @click="handleClose" size="large" class="closeBtn">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import {nextTick, onBeforeUpdate, onMounted, reactive, ref, toRefs, watch} from "vue";
import AddOrUpdate from "./poappage-add-or-update.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import baseService from "@/service/baseService";
import {IObject} from "@/types/interface";

const props = defineProps({
  projectId:String,
  projectStatus:Number
})

const visible = ref(false)

const view = reactive({
  getDataListURL: "/poap/poappage/page",
  getDataListIsPage: true,
  exportURL: "/poap/poappage/export",
  deleteURL: "/poap/poappage",
  deleteIsBatch: true,
  deleteIsBatchKey:"id",
  datetimerange: null,
  drawerPage:false,
  dataForm: {
    delFlag:0,
    participantId: "",
    projectId: "" as any,
    pageId:"",
    title: "",
    keyword: "",
    author: "",
    publishStatus: "",
    startDateTime: null as number | null,
    endDateTime: null as number | null,
  },
  publishText:[
    {value:0,label:"已出版"},
    {value:1,label:"未出版"},
  ],
  pageIds:[] as any[]
});

const state = reactive({ ...useView(view), ...toRefs(view) });

watch(
  () => state.datetimerange,
  (val: number[] | null) => {
    if (val === null) {
      state.dataForm.startDateTime = null;
      state.dataForm.endDateTime = null;
    } else {
      state.dataForm.startDateTime = val[0];
      state.dataForm.endDateTime = val[1];
    }
  },
)

watch(
  ()=>state.dataList,
  (newValue,oldValue)=>{
    getText()
  }
)

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};

const initPage = ()=>{
  state.drawerPage = true;
  state.dataForm.projectId = props.projectId;
  // if (props.projectStatus === 1 || props.projectStatus === 2) this.buttonShow = false;
  refresh();
};
const refresh = ()=>{
  state.getDataList();
};

const deleteHandle=(id?:string)=>{
  if (
    state.deleteIsBatch &&
    !id &&
    state.pageIds &&
    state.pageIds.length <= 0
  ) {
    ElMessage.warning({
      message: "请选择操作项",
      duration: 500
    });
    return;
  }
  ElMessageBox.confirm(("确认删除吗？"), {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    baseService
      .delete(
        `${state.deleteURL}${state.deleteIsBatch ? "" : "/" + id}`,
        state.deleteIsBatch ?
          id ?
            [id] :
            state.pageIds ?
              state.pageIds : {} : {}
      )
      .then((res:any) => {
        ElMessage.success({
          message: "删除成功",
          duration: 500,
          onClose: () => {
            state.getDataList()
          }
        });
      });
  })
    .catch(() => {
      //
    });
}

const dataListSelectionChange=(val:any)=>{
  console.log(val)
  for (let i = 0; i < val.length; i++) {
    state.pageIds[i] = val[i].id;
  }
}
const emit = defineEmits(["getPageId"])
const postId = ()=>{
  ElMessageBox.confirm("","确认提交吗？",{
    confirmButtonText:"确认",
    cancelButtonText:"取消"
  }).then(()=>{
    console.log(state.pageIds)
    emit("getPageId",state.pageIds)
    state.drawerPage = false;
  })
}
const handleClose = ()=> {
  ElMessageBox.confirm('确定要关闭吗？',{confirmButtonText:"确认",cancelButtonText:"取消"})
    .then(() => {
      state.drawerPage = false;
    })
};

const getText = ()=>{
  state.dataList=state.dataList!.map((item)=>{
    return {...item,publishText:""}
  })
  if(state.dataList) {
    for (let i = 0; i < state.dataList.length; i++) {
      if (state.dataList[i].publishStatus === 0) state.dataList[i].publishText = "未出版";
      else if (state.dataList[i].publishStatus === 1) state.dataList[i].publishText = "已出版";

      console.log(state.dataList[i].publishText)
    }
  }
}

const addPage = (id:string)=>{
  baseService.get("/poap/poappage/addPage",{
    projectId:props.projectId,pageId:id
  }).then((res)=>{
    console.log(res)
    if(res.code != 0) return false
    ElMessageBox({
      type:"success",
      message:"添加成功"
    })
    state.getDataList()
  })
}

defineExpose({initPage})
</script>
<style scoped lang="less">
.el-table__row.el-table_1_column_2:deep(.cell){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  overflow: hidden;
}

</style>